<!DOCTYPE HTML>
<style>
  * {
      margin: 0;
      padding: 0;
  }
</style>

<!-- Image, map, and area are all not content editable. -->
<img id="imageANotEditable" width="100" height="100" src="" usemap="#imageMapANotEditable">
<map id="imageMapANotEditable" name="imageMapANotEditable">
  <area id="areaANotEditable" shape="rect" coords="0,0,50,50" href="#" role="img">
</map>
<br>

<!--Image is content editable, map and area are not. -->
<img id="imageBEditable" width="100" height="100" src="" usemap="#imageMapBNotEditable" contentEditable="true">
<map id="imageMapBNotEditable" name="imageMapBNotEditable" contentEditable="false">
  <area id="areaBNotEditable" shape="rect" coords="0,0,50,50" href="#" role="img">
</map>
<br>

<!-- Map is content editable, image and area are not. -->
<img id="imageCNotEditable" width="100" height="100" src="" usemap="#imageMapCEditable">
<map id="imageMapCEditable" name="imageMapCEditable" contentEditable="true">
  <area id="areaCNotEditable" shape="rect" coords="0,0,50,50" href="#" role="img" contentEditable="false">
</map>
<br>

<!-- Area is content editable, image and map are not. -->
<img id="imageDNotEditable" width="100" height="100" src="" usemap="#imageMapDNotEditable">
<map id="imageMapDNotEditable" name="imageMapDNotEditable">
  <area id="areaDEditable" shape="rect" coords="0,0,50,50" href="#" role="img" contentEditable="true">
</map>